<template>
    <div>
        <el-dialog center custom-class="hei_dialog" v-model="res.dialogVisible" title="详细菜单" width="30%"
            :before-close="handleClose">
            <div class="menu-padd" v-for="(item,index) in res.menu_data" :key="index">
                <div class="Menu-details menu-span">
                    <span>第{{ res.menu_data.length - index}}次下单</span>
                </div>
                <div>
                    <div class="Menu-details menu-margin" v-for="(item2,index2) in item.goods_list" :key="index2">
                        <span>{{item2.name}}</span>
                        <span v-if="item2.good_specs !== ''">{{ item2.good_specs}}</span>
                        <span>{{ item2.quantity}}{{item2.unit}}</span>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { reactive } from 'vue'

export default {
    setup () {
        const res = reactive({
            dialogVisible:false,
            menu_data:[]//菜单详情数据
        })

        // 父组件传的值
        function popup(val){
            // console.log(val)
            res.dialogVisible=true
            res.menu_data = val
        }

        return {res, popup}
    }
}
</script>

<style>
.hei_dialog{
    height: 600px;
    overflow-y: auto;
}
</style>